<!-- App.vue -->
<template>
  <div>
    <h2>{{ userStore.welcomeMessage }}</h2>
    <button @click="userStore.login('李四')">登录</button>

    <h3>商品列表</h3>
    <ul>
      <li v-for="product in productStore.productList" :key="product.id">
        {{ product.name }} - ￥{{ product.price }}
        <button @click="cartStore.addToCart(product)">加入购物车</button>
      </li>
    </ul>

    <h3>总价：￥{{ cartStore.totalPrice }}</h3>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useUserStore } from '../../store/module/userStore'
import { useProductStore } from '../../store/module/productStore'
import { useCartStore } from '../../store/module/cartStore'

const userStore = useUserStore()
const productStore = useProductStore()
const cartStore = useCartStore()

onMounted(() => {
  productStore.fetchProducts()
})
</script>
